<template lang="pug" >
  #app( ref='app')
    v-header
    .wrapper
      v-panel
      .container
        .item
          v-tzmap
          v-logs
        .item
          v-health
          v-health(:active="true").active
          VunitRatio
        .item
          v-charged
          VsystemRatio
</template>

<script>
import VHeader from '@/components/v-header/index'
import VPanel from '@/components/panel/index'
import VTzmap from '@/components/tzmap/index'
import VLogs from '@/components/logs/index'
import VHealth from '@/components/health/index'
import VunitRatio from '@/components/unitRatio/index'
import VsystemRatio from '@/components/systemRatio/index'
import VCharged from '@/components/charged/index'
export default {
  components: {
    VHeader,
    VPanel,
    VTzmap,
    VLogs,
    VHealth,
    VunitRatio,
    VsystemRatio,
    VCharged
  },
  mounted () {
    this.resize()
    window.onresize = _ => this.resize()
    this.relaod()
  },
  methods: {
    relaod () {
      setTimeout(() => {
        Window.location.relaod()
        console.log('--')
        this.relaod()
      }, 1000)
    },
    resize () {
      let winH = window.innerHeight
      let winW = window.innerWidth
      let ratio = winW / winH
      let scale = winH / 1080
      this.$refs.app.style.width = ratio * 1080 + 'px'
      this.$refs.app.style.transform = `scale(${scale},${scale}`
    }
  }
}
</script>

<style lang="stylus" scoped>
  #app
    font-family 'MicrosoftYaHei'
    width 1920px
    height 1080px
    position fixed
    left 0
    top 0
    transform-origin 0 0
    font-size 24px
    background #021233
    color #ccf8fe
    .wrapper
      padding 15px 20px 20px
      .container
        display flex
        margin-left -11px
        margin-right -11px
        .item
          flex 1
          padding-left: 11px;
          padding-right: 11px;
          .active
            margin-bottom 18px
</style>
